<template>
	<view class="codePopup">
		<view class="codePopup-shopImg">
			<image :src="resaleData.thumb" mode="widthFix"></image>
		</view>
		<view class="codePopup-purchase">
			<view class="codePopup-purchase-name">
				<text>{{resaleData.title}}</text>
			</view> 
			<!-- <view class="codePopup-purchase-price">
					<text >购买价格：¥{{resaleData.price}}</text>
			</view> -->
		</view>
		<view class="codePopup-sold">
			<text>售出价格</text>
			<u--input
			    placeholder="请设置您希望售出的价格"
			    border="noen"
			    v-model="price"
			    @change="priceChange"
			  ></u--input>
		</view>
		<view class="codePopup-tips">
			<view class="codePopup-tips-thirdParty">
				<text>综合服务费{{resaleData.fee}}%</text>
				<text>{{service}}</text>
			</view>
		<!-- 	<view class="codePopup-tips-platform">
				<text>平台服务费</text>
				<text>{{resaleData.fee}}%</text>
			</view>
			<view class="codePopup-tips-creator">
				<text>创作者版权分成</text>
				<text>{{resaleData.fee2}}%</text>
			</view> -->
		</view>
		<view class="codePopup-btn">
			<view class="codePopup-btn-arrived">
				<text>到账金额</text>
				<text>￥{{this.price - this.service}}</text>
			</view>
			<view  class="codePopup-btn-sure" :class="price?'suretrue':''" @click="sureConsignment">
				<text>确认寄售</text>
				<u-icon style="margin-right: 32rpx;" name="arrow-rightward" color="#16172F" size="20"></u-icon>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			resaleData:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		watch:{
			resaleData(v){
				console.log(v)
			}
		},
		data(){
			return{
				price:'',
			    service:'',
			}
			
		},
		methods:{
			priceChange(v){
				this.service= ((v*1) * (this.resaleData.fee / 100)).toFixed(2)
			},
			sureConsignment(){
				this.$emit('sureConsignment',this.price)
			}
		}
	}
</script>

<style scoped lang="scss">

	.codePopup{
		padding-top: 80rpx;
		&-shopImg{
			width: 200rpx;
			margin: auto;
			image{
				width: 100%;
			}
		}
		&-purchase{
			text-align: center;
			&-name{
				font-size: 40rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292A40;
			}
			&-price{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777E90;
				// margin-top: -20rpx;
			}
		}
		&-sold{
			width: calc(100vw - 80rpx);
			margin: auto;
			height: 100rpx;
			border-radius: 2rpx;
			border: 1rpx solid #979797;
			filter: blur(0px);
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 700;
				color: #16172F;
				margin-left: 32rpx;
			}
			
		}
		&-tips{
			&-thirdParty{
				display: flex;
				justify-content: space-between;
				// padding: 0 40rpx;
				margin-top: 44rpx;
				margin-left: 40rpx;
				text:nth-child(1){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8C93AA;
				}
				text:nth-child(2){
					margin-right: 40rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
				}
			}
			&-platform{
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				margin-top: 36rpx;
				text:nth-child(1){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8C93AA;
				}
				text:nth-child(2){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
				}
			}
			&-creator{
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				margin-top: 36rpx;
				text:nth-child(1){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8C93AA;
				}
				text:nth-child(2){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
				}
			}
		}
		&-btn{
			width: 100vw;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px -8px 18px 0px rgba(7,8,28,0.04);
			backdrop-filter: blur(0px);
			// margin-left: -30rpx;
			margin-top: 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-arrived{
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				text:nth-child(1){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8C93AA;
				}
				text:nth-child(2){
					font-size: 48rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #16172F;
				}
			}
			&-sure{
				width: 268rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				opacity: 0.3;
				border: 1px solid #979797;
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
					margin-left: 32rpx;
				}
			}
			.suretrue{
				opacity:1;
			}
		}
	}
	::v-deep .uni-input-placeholder{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8C93AA;
		text-align: right;
	}
	::v-deep .uni-input-input{
		 text-align: right;
		  // direction: rtl;
	}
</style>